<template>
  <div class="hm-input">
    <input
      :type="type"
      :placeholder="placeholder"
      :value="value"
      @input="inputFn"
      :class="{ success: status === 'success', error: status === 'error' }"
    />
    <div class="tips" v-show="status === 'error'">用户名错误</div>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    rule: RegExp,
    message: String
  },
  methods: {
    inputFn(e) {
      // console.log(e.target.value)
      let value = e.target.value
      this.$emit('input', value)
      this.validate(value)
    },
    validate(value) {
      if (this.rule) {
        if (this.rule.test(value)) {
          this.status = 'success'
          return true
        } else {
          this.status = 'error'
          return false
        }
        console.log(this.status)
      }
    }
  },
  data() {
    return {
      status: ''
    }
  }
}
</script>

<style lang="less" scoped>
.hm-input {
  margin: 0 20px;
  input {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    &.success {
      border-color: green;
    }
    &.error {
      border-color: red;
    }
  }
  .tips {
    color: red;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }
}
</style>
